YUI().use('dial', function(Y) {

    var sceneH = Y.one('#scene').get('region').height,
    subSea = 450,
    viewFrameH = Y.one('#view_frame').get('region').height -2,
    zeroPt = 100,
    originY = -sceneH + subSea + viewFrameH - zeroPt;

    Y.one('#scene').setStyle('top', originY + 'px');

    /**
    * The Dial's valueChange event is passed to this.
    * sets the CSS top value of the pictoral scene of the earth to the hubble.
    * This scene is an absolute positioned div inside another div with
    * overflow set to hidden.
    */
    setSceneY = function(e) {
        Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
    }

    var dial = new Y.Dial({
        min:-35,
        max:559,
        stepsPerRevolution:30,
        value: 0,
        diameter: 100,
        minorStep: 1,
        majorStep: 10,
        decimalPlaces: 2,
        strings:{label:'Altitude in Kilometers:', resetStr: 'Reset', tooltipHandle: 'Drag to set'},
        // construction-time event subscription
        after : {
            valueChange: Y.bind( setSceneY, dial )
        }
    });
    dial.render('#demo');

    // Function that calls a method in Dial that sets its value to the value of the max config attribute
    // Other methods available include,
    // _setToMin(), _resetDial(), _incrMinor(), _decrMinor(), _incrMajor(), _decrMajor(),
    var setDialToMax = function(e){
        e.preventDefault();
        this._setToMax();
    }

    // Subscribe to the click of the "Hubble" anchor, passing the dial as the 'this'
    Y.on('click', setDialToMax, '#a-hubble', dial);

});
